<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
           过渡 transition
            transition-property 过渡的属性 all所有
            transition-duration 过渡的时间  s秒
            transition-delay 过渡延迟 s

           transition-timing-function 运动形式 ease 默认值 慢速开始，然后变快，然后慢速结束
     -->
     <link rel="stylesheet" href="../day13/style.css">
     <style>
         ul{width:200px; height:60px;}
         ul li{width:200px; height:60px; background: red;
          
            margin-bottom: 20px;
        }
         ul:hover li{
             width: 1000px;
         }
         ul li:nth-child(1){
            transition: all 0.5s ease;
         }
         ul li:nth-child(2){
            transition: all 0.5s linear;
         }
         ul li:nth-child(3){
            transition: all 0.5s ease-in;
         }
         ul li:nth-child(4){
            transition: all 0.5s ease-out;
         }
         ul li:nth-child(5){
            transition: all 0.5s ease-in-out;
         }
         ul li:nth-child(6){
            transition: all 0.5s cubic-bezier(0, 1.48, 0.91,-0.4);
         }
         ul li:nth-child(7){
            transition: all 2s steps(5);
         }
     </style>
</head>
<body>
   <ul>
       <li>ease 慢速开始，然后变快，然后慢速结束,默认值</li>
       <li>linear 匀速</li>
       <li>ease-in 加速</li>
       <li>ease-out 减速</li>
       <li>ease-in-out 先加速后减速</li>
       <li>cubic-bezier(0, 1.48, 0.91,-0.4) 贝塞尔曲线</li>
       <li>steps(5) 帧</li>
   </ul> 
</body>
</html>